<template>
    <view>
        <u-popup :show="show" :custom-style="{width: '100%'}" mode="top" @close="onClose" @confirm="onConfirm" confirm-text="关闭">
            <view class="slot-content">
                <view class="legend-box">
                    <view class="legend-box-item">
                        <view style="width: 100%;">
                            <u-tag type="primary" plain text="打卡"></u-tag>
                        </view>
                    </view>
                    <view class="legend-box-item">
                        <view style="width: 100%;">
                            <u-tag type="warning" plain text="未打卡"></u-tag>
                        </view>
                    </view>
                    <view class="legend-box-item">
                        <view style="width: 100%;">
                            <u-tag type="info" plain text="请假"></u-tag>
                        </view>
                    </view>
                    <view class="close-btn">
                        <u-button shape="circle" size="mini" @click="onClose">关闭</u-button>
                    </view>
                </view>
                <view class="post-box">
                    <view
                        v-for="(postItem) in tableData"
                        :key="postItem.postId"
                        class="post-item"
                    >
                        <view class="post-item-label">{{ postItem.postName }}</view>
                        <view class="post-item-emp-box">
                            <view
                                v-for="(empItem) in postItem.scheduleEmpList"
                                :key="empItem.id"
                                class="post-item-emp-box-item"
                            >
                                <view style="width: 100%;">
                                    <u-tag :text="empItem.empName" plain></u-tag>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
    import {workforceManagementScheduleGroupPostList} from "../../api";
    export default {
        props: {
            state: {
                type: Boolean,
                default: false
            },
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                tableData: [],
                show: false,
            };
        },
        methods: {
            onConfirm() {
                this.$emit('on-visible-change', false);
            },
            onClose() {
                this.$emit('on-visible-change', false);
            },
            getSchedulePostListRequest() {
                if (this.searchParams.scheduleId && this.searchParams.scheduleGroupId) {
                    return workforceManagementScheduleGroupPostList({
                        scheduleId: this.searchParams.scheduleId,
                        scheduleGroupId: this.searchParams.scheduleGroupId,
                        ifMainPost: true,
                        processCodeList: ['QH', 'SM', 'TB', 'MB', 'CS']
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.tableData = res.data.res || [];
                        }
                    });
                }
            },
        },
        watch: {
            state(newVal) {
                this.show = newVal;
                if (newVal) {
                    this.getSchedulePostListRequest();
                }
            }
        }
    }
</script>
<style scoped lang="scss">
.slot-content {
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
    .legend-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .legend-box-item {
            width: 100px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .close-btn {
            position: absolute;
            right: 0rpx;
            top: 50%;
            height: 28px;
            margin-top: -14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .post-box {
        width: 100%;
        height: 70vh;
        overflow: auto;
        display: flex;
        .post-item {
            width: 100%;
            height: 90%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            border: solid 1px #eee;
            border-right: none;
            .post-item-label {
                width: 100%;
                height: 36px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: solid 1px #eee;
                font-size: 14px;
                background: #f8f8f9;
                flex-shrink: 0;
            }
            .post-item-emp-box {
                display: flex;
                flex-wrap: wrap;
                padding: 10px 8px;
                box-sizing: border-box;
                .post-item-emp-box-item {
                    width: 100px;
                    //padding: 10rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 5px;
                }
            }
        }
    }
}
</style>
